<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sporting</title>
</head>

<body class="df dcloum">
    <main class="flex ">
        <!-- 倒计时蒙层 -->
        <div class="mask flex ">
            <div class="abs" id="countDown">3</div>
        </div>


        <!-- 主要内容 -->
        <div class="content rel">
            <!-- 顶部设置 -->
            <div class="top df">
                <!-- 左 -->
                <div class="left">
                    <span>户外跑</span>
                    <p>运动中</会>
                </div>
                <!-- 右 -->
                <div class="right df">
                    <span class="iconfont icon-music"></span>
                    <span class="iconfont icon-diaojiekongzhi2
            "></span>
                </div>
            </div>
            <!-- 中间99.99公里 -->
            <div class="distance">
                <span>99.99</span>公里
            </div>
            <!-- GPS地图 -->
            <div class="map df">
                <span class="text ">GPS信号度低, 数据精准度低</span>
                <span class="line rel"></span>
                <span class="iconfont icon-d-adress"></span>
            </div>
            <!-- 数据 -->
            <div class="data df ">
                <div class="speed rel">
                    <span class="iconfont icon-speed abs"></span>
                    <span class=" rel special">配速</span>
                    <span class="rel num line">---</span>
                </div>
                <div class="time">
                    <span class="iconfont icon-time"></span>
                    <span>用时</span>
                    <span class="num">00:00:20</span>
                </div>
                <div class="fire">
                    <span class="iconfont icon-qialuli"></span>
                    <span>千卡</span>
                    <span class="num">3000</span>
                </div>
            </div>
            <!-- 暂停操作 -->
            <div class="operate df" id="operate">
                <span class="iconfont icon-weixin"></span>
                <div class="pause df dcloum tcenter">
                    <span class="iconfont icon-pause2"></span>
                    <span id="puseBtn">暂停</span>
                </div>
                <span class="iconfont icon-suoding"></span>
            </div>
            <!-- 蒙层2 -->
            <!-- 继续 结束按钮 -->
            <div class="btn abs df" id="btns">
                <span class="circle df dcloum" id="continueBtn">
                    <span class="iconfont icon-pause"></span>
                    <span>继续训练</span>
                </span>
                <span class="circle df dcloum" id="endBtn">
                    <span class="iconfont icon-jieshu"></span>
                    <span>结束训练</span>
                </span>
            </div>
        </div>

    </main>
</body>

</html>